<html>
<head>
<title>Desktop Image Map Editor</title>
<link rel="stylesheet" href="imgmap.css" type="text/css">
<script language="javascript" type="text/javascript" src="AIRIntrospector.js"></script>
<script language="javascript" type="text/javascript" src="AIRAliases.js"></script>
</head>
<body>
<p id="intro" style="font: bold 12px Verdana; padding: 5px 5px 0 5px">This example shows how to use the imgmap component in an Adobe AIR application.</p>
	<form id="img_area_form">
		<fieldset>
			<legend>
				<a onclick="toggleFieldset(this.parentNode.parentNode)">Image map areas</a>
			</legend>
			<div style="border-bottom: solid 1px #efefef">
				<table cellspacing="0" width="100%">
				<tr>
				<td width="110">
				<div id="button_container">
					<!-- buttons come here -->
					<img src="add.gif" onclick="myimgmap.addNewArea()" alt="Add new area" title="Add new area"/>
					<img src="delete.gif" onclick="myimgmap.removeArea(myimgmap.currentid)" alt="Delete selected area" title="Delete selected area"/>
					<img src="zoom.gif" id="i_preview" onclick="myimgmap.togglePreview();" alt="Preview image map" title="Preview image map"/>
					<img src="html.gif" onclick="gui_htmlShow()" alt="Get image map HTML" title="Get image map HTML"/>
				</div>
				</td>
				<td>
					<label for="dd_zoom">Zoom</label>:
					<select onchange="gui_zoom(this)" id="dd_zoom">
					<option value='0.25'>25%</option>
					<option value='0.5'>50%</option>
					<option value='1' selected="1">100%</option>
					<option value='2'>200%</option>
					<option value='3'>300%</option>
					</select>
					<label for="dd_output">Output</label>:
					<select id="dd_output" onchange="return gui_outputChanged(this)">
					<option value='imagemap'>Standard imagemap</option>
					<option value='css'>CSS imagemap</option>
					<option value='wiki'>Wiki imagemap</option>
					</select>
				</td>
				<td align="right" width="50%">
					<input type="checkbox" id="bb" onClick="toggleBoundingBox(this)"/> <label for="bb">bounding box</label>&nbsp;
					<select onchange="changelabeling(this)">
					<option value=''>No labeling</option>
					<option value='%n' selected='1'>Label with numbers</option>
					<option value='%a'>Label with alt text</option>
					<option value='%h'>Label with href</option>
					<option value='%c'>Label with coords</option>
					</select>
				</td>
				</tr>
				</table>
			</div>
			<div id="form_container" style="clear: both;">
			<!-- form elements come here -->
         	</div>
		</fieldset>
		<div id="pic_container">
		<em>Drag and drop file or url here to start editing, or select load options from the file menu.</em>
		</div>			
		<fieldset>
			<legend>
				<a onclick="toggleFieldset(this.parentNode.parentNode)">Status</a>
			</legend>
			<div id="status_container"></div>
		</fieldset>
		<fieldset id="fieldset_html">
			<legend>
				<a onclick="toggleFieldset(this.parentNode.parentNode)">Code</a>
			</legend>
			<div>
			<div id="output_help">
			</div>
			<textarea id="html_container"></textarea></div>
		</fieldset>
	</form>

<script type="text/javascript" src="air.js"></script>
<script type="text/javascript" src="imgmap.js"></script>
<script type="text/javascript" src="default_interface.js"></script>

</body>
</html>
